Precargar Contenido
Según cuáles sean las características y requerimientos de una página a la hora de ser cargada por el navegador, se puede dar el caso de que se requiera que ciertos scripts o elementos estén disponibles al momento de que los elementos sean cargados, todo esto para el correcto funcionamiento de la página, sin embargo la forma en la que se cargan los diversos archivos que conforman una página web se encuentra ya establecida de antemano.
Existe una forma de asignar un elemento o dato para que sea tratado con prioridad por el navegador a la hora de cargar la página, para que de ese modo este recurso esté disponible al momento de que sea requerido, este tipo de configuración se logra empleándolo en los metadatos de la página, más precisamente con el elemento "link" el cual posee el atributo "rel" el cual a su vez cuenta con el valor "preload".
En otras palabras, al aplicarse el valor "preload" en el atributo "rel" del elemento "link" se puede definir que algún elemento se cargue con antelación ya que este será requerido rápidamente al cargarse la página, un aspecto a tener en cuenta de esta implementación es que pese a que el nombre de este valor contiene el término 'precargar', realmente este no carga ni ejecuta ningún script, simplemente asigna que estos elementos seleccionados sean descargados y almacenados en caché con prioridad.
Por lo tanto el elemento "link" no solo se utiliza para cargar los estilos CSS de la página:
Sino que también tiene la función de designar algún elemento para que se precargue al iniciarse la carga de la página como se puede apreciar en el siguiente ejemplo:
Este ejemplo aparte de simple puede parecer trivial, sin embargo los beneficios de implementar el preload se hacen notar a la hora de que los demás elementos HTML sean cargados, por ejemplo es útil seleccionar a los siguientes elementos para que sean precargados con antelación:
Recursos a los que se les apunta desde dentro de CSS como fuentes o imágenes
Recursos que puedan solicitar JavaScript como JSON, scripts importados o web workers
Imágenes más grandes y archivos de vídeo
Al emplear el "preload" es importante tener presente:
Atributo As
Es posible mejorar el rendimiento del "preload" con el atributo "as", el cual se utiliza en conjunto con este y permite definir de qué tipo de archivo se trata la precarga, al hacer esto se obtienen las siguientes ventajas:
Priorizar la carga de recursos con mayor precisión
Almacenar el caché para futuras ocasiones reutilizando el recurso si es preciso
Aplicar la política de seguridad correcta al recurso
Establecer los encabezados de solicitud de aceptación correctos
Debido a que es posible precargar muchos tipos de archivos el atributo "as" posee muchos valores, algunos de estos son:
| Valor del atributo |
Tipo de archivo |
Descripción |
| audio |
audio |
Define un archivo de audio, se incorpora igual que lo haría en un elemento "audio" |
| document |
document |
Define un documento HTML que será incrustado en un "frame" o un "iframe" |
| embed |
Algún recurso |
Cualquier recurso que será incrustado en un "embed" |
| fetch |
Recurso Fetch o XHR |
Recurso al que se accederá mediante una solicitud fetch o XHR, como un archivo ArrayBuffer, WebAssembly/WASM binario o JSON |
| font |
Fuente |
Define un archivo de fuente CSS |
| image |
archivo de imagen |
Define la precarga de un archivo de imagen, normalmente se usa para imágenes particularmente grandes |
| object |
Algún Recurso |
Un recurso para ser incrustado en un elemento "object" |
| script |
Archivo JS |
Define la precarga de un archivo JavaScript |
| style |
Estilos CSS |
Define la precarga de una hoja de estilos CSS |
| track |
archivo WebVTT |
Define la carga de un archivo WebVTT |
| worker |
worker web o JS |
Define la precarga de un worker de JavaScript o un worker compartido |
| video |
archivo de vídeo |
Define la precarga de un archivo de vídeo como los que se usan comúnmente en los elementos "video" |
Incluyendo el tipo MIME
Los elementos "link" son capaces de recibir un atributo "type" el cual a su vez puede recibir el tipo MIME del recurso al que apunta el elemento. Esto es particularmente útil cuando se precargan recursos, en otras palabras la función de esto es que el navegador tenga una forma de determinar si el recurso es compatible consigo mismo; en caso de que sí lo sea, el recurso será descargado, por otro lado, en caso de que no sea compatible el recurso simplemente será ignorado por el navegador.
Nota: MIME o Múltiples Internet Mail es una extensión del protocolo de correo de Internet original que permite a las personas utilizar el protocolo para el intercambio de diferentes tipos de archivos de datos en Internet: audio, vídeo, imágenes, programas de aplicaciones y otros tipos, así como el texto.
A continuación se muestra un fragmento de código el cual en términos simples es el responsable del comportamiento central detrás de la precarga general:
Este código de ejemplo asigna un video.mp4 para que se cargue previamente en todos aquellos navegadores que tengan soporte para vídeos mp4, por lo tanto para los usuarios de estos navegadores la interacción con el vídeo será más suave y receptiva en comparación con aquellos navegadores que no sean compatibles con el recurso.
Es bueno tener en cuenta que en el caso de que se emplee la técnica de asignar tanto un vídeo ".mp4" como uno ".webm" con el fin de mejorar la compatibilidad, si se llega a presentar un usuario desde un navegador que posea compatibilidad con ambos formatos entonces los dos recursos serán descargados, todo esto pese a que realmente solo uno de estos llegará a ser utilizado, como se puede apreciar en este ejemplo:
Por lo tanto no es recomendable el precargar varios recursos para un mismo elemento, para estos casos lo mejor simplemente es precargar el recurso que se crea que llegará a ser utilizado por la mayoría de los usuarios, cabe señalar que esto no hará que el video.webm no esté disponible para los navegadores que lo requieran, de hecho en el ejemplo HTML mostrado con anterioridad ese código también hace que se precargue el video.webm pero lo define de una forma que hará que este no sea precargado innecesariamente para todos los usuarios.
Recuperaciones habilitadas para CORS
Al precargar recursos que se obtienen con CORS habilitado (por ejemplo, fetch(), XMLHttpRequest o fuentes), se debe tener especial cuidado al configurar el atributo crossorigin en su elemento de enlace. El atributo debe configurarse para que coincida con el modo de credenciales y CORS del recurso, incluso cuando la recuperación no es de origen cruzado.
Nota: Recordemos que el intercambio de recursos de origen cruzado o CORS es un mecanismo que permite que se puedan solicitar recursos restringidos en una página web desde un dominio diferente del dominio que sirvió el primer recurso.
Como se mencionó anteriormente, un caso interesante en el que esto se aplica son los archivos de fuentes. Por varios motivos, estos deben obtenerse mediante CORS en modo anónimo, usando este caso como ejemplo resultaría en lo siguiente:
En este ejemplo no solo se proporcionan sugerencias de tipo MIME en los atributos de tipo, sino que también se proporciona el atributo de origen cruzado para asegurar que el modo CORS de la precarga coincida con la solicitud de recurso de fuente eventual.
Precargar Script de JavaScript
Como ya se ha mencionado anteriormente es posible el precargar scripts JavaScript, recordemos que la precarga no significa que se ejecutará el script, por ejemplo el siguiente código:
Aquí creamos una instancia de HTMLLinkElement y luego la adjuntamos al DOM, esto significa que el navegador precargará el archivo myscript.js, pero aún no lo usará. Para usarlo se podría hacer esto:
Esto es útil cuando desea precargar un script, pero luego posponer la ejecución hasta exactamente cuando lo necesite.
Compatibilidad con Navegadores
A continuación se muestra una breve tabla de la compatibilidad de este atributo en las diferentes versiones de los principales navegadores:
